<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="lib/css/bootstrap.css">

    <script src="lib/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Id:
                <input type="text" class="form-control" v-model="id">
            </label>

            <label>
                Name:
                <input type="text" class="form-control" v-model="name">
            </label>

            <!--方法如果加括号就可以传参-->

            <input type="button" value="添加" class="btn bg-primary" @click="add">

            <label>
                搜索名字关键字:
                <input type="text" class="form-control" v-model="keywords">
            </label>
        </div>
    </div>


    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctimes</th>
            <th>Operation</th>
        </tr>
        </thead>
        <tbody>
        <!--之前v-for中的数据都是从data中的数据渲染过来的-->
        <!--现在 我们可以自定义一个search方法 同事把所有的关键字 ，通过串传参的形式，传递给search方法-->
        <!--在search方法内部，通过for循环，把所有符合搜索关键词的数据，保存到一个新数组中，返回-->
        <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{ item.id}}</td>
            <!--<td>{{ item.name}}</td>-->
            <td v-text="item.name"></td>
            <td>{{ item.ctimes}}</td>
            <td>
                <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    // 创建一个vue实例
    new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keywords:'',
            list:[
                {id:1,name:'奔驰',ctimes:new Date()},
                {id:2,name:'宝马',ctimes:new Date()}
            ]
        },
        methods:{
            add() {
                this.list.push({id:this.id,name:this.name,ctimes:new Date()})
                this.id = '';
                this.name =  '';
            },
            del(id){
//                this.list.some((item,index) =>{
//                    if(item.id === id){
//                        this.list.splice(index,1)
//                        return true
//                    }
//                })

                var index = this.list.findIndex(item =>{
                    if (item.id === id){
                        return true
                    }
                })
                this.list.splice(index,1)
            },
            search(keywords) {
//                var newList = [];
//                this.list.forEach(item =>{
//                    if(item.name.indexOf(keywords) != -1){
//                        newList.push(item)
//                    }
//                })
//                return newList
                return this.list.filter(item =>{
//                    if(item.name.indexOf(keywords)) {}
                    if(item.name.includes(keywords)){
                        return item
                    }
                })



            }
        }
    })
</script>
</body>
</html>
